<div class="container-fluid summary-tab" ng-controller="SummaryController">

  <div class="row" ng-if="selectedType === pipelineConstant.PIPELINE && triggeredAlerts.length">
    <div class="col-sm-12 col-md-12 col-lg-12 triggered-alerts"
         ng-repeat="triggeredAlert in triggeredAlerts | filter: {type: 'METRIC_ALERT'}">
      <div class="alert alert-danger" role="alert">
        <i class="fa fa-exclamation-triangle"></i>
        <span>{{triggeredAlert.ruleDefinition.alertText}}</span>
        <span class="alert-details"> ( {{'home.detailPane.summaryTab.currentValue' | translate}}: {{triggeredAlert.gauge.value.currentValue}}, {{'home.detailPane.summaryTab.triggered' | translate}}: {{triggeredAlert.gauge.value.timestamp | amTimeAgo}} )</span>
        <div class="pull-right">
          <a href="#"
             ng-click="deleteTriggeredAlert(triggeredAlert)">
            <span translate="global.form.delete">Delete</span>
          </a>
          &nbsp;|&nbsp;
          <a href="#"
             ng-click="selectRulesTab(triggeredAlert)">
            <span translate="global.form.changeRule">Change Rule</span>
          </a>
        </div>

      </div>
    </div>
  </div>

  <div class="row" ng-if="summaryDataLoaded">
    <ng-include ng-repeat="(chartIndex, chart) in $storage.summaryPanelList" src="chart.templateId">
    </ng-include>
  </div>

</div>


<script type="text/ng-template" id="summaryRecordPercentagePieChartTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.STAGE_INSTANCE && timeRange === 'latest'"
       ng-controller="RecordPercentagePieChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.recordsProcessed' | translate}}"
          translate="home.detailPane.summaryTab.recordsProcessed">Records Processed</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">

        <nvd3 ng-if="timeRange === 'latest' && !allDataZero"
              options="chartOptions" data="pieChartData" config="{ refreshDataOnly: true }"></nvd3>

        <span class="zero-value" ng-if="allDataZero">0</span>

      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryRecordCountBarChartTemplate">
  <div class="col-sm-4"
       ng-controller="RecordCountBarChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.recordCountBarChartTitle' | translate}}"
              translate="home.detailPane.summaryTab.recordCountBarChartTitle">Record Count (since last startup)</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">

        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="barChartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest'"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>

      </div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="summaryRecordsThroughputMeterBarChartTemplate">
  <div class="col-sm-4"
       ng-controller="MeterBarChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.recordThroughput' | translate}}"
              translate="home.detailPane.summaryTab.recordThroughput">Record Throughput</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">

        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest'"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>

      </div>
    </div>
  </div>

</script>


<script type="text/ng-template" id="summaryBatchThroughputBarChartTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE"
       ng-controller="BatchCountBarChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.batchThroughput' | translate}}"
          translate="home.detailPane.summaryTab.batchThroughput">Batch Throughput</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">

        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest'"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>

      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryRecordHistogramTemplate">
  <div class="col-sm-4"
       ng-if="activeConfigStatus.executionMode !== pipelineConstant.CLUSTER && timeRange === 'latest'"
       ng-controller="HistogramChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'global.form.histogram' | translate}}"
          translate="global.form.histogram">Record Histogram (5 minutes decay)</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">
        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="timerData" config="{ refreshDataOnly: true }"></nvd3>
      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryRecordsProcessedTemplate">
  <div class="col-sm-4"
       ng-if="activeConfigStatus.executionMode !== pipelineConstant.CLUSTER && timeRange === 'latest'"
       ng-controller="BatchTimerChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.batchProcessingTimer' | translate}}"
          translate="home.detailPane.summaryTab.batchProcessingTimer">Batch Processing Timer (in seconds)</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">
        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="timerData" config="{ refreshDataOnly: true }"></nvd3>
      </div>

    </div>
  </div>
</script>

<script type="text/ng-template" id="memoryConsumedLineChartTemplate">
  <div class="col-sm-4"
       ng-if="activeConfigStatus.executionMode !== pipelineConstant.CLUSTER && monitorMemoryEnabled"
       ng-controller="MemoryConsumedLineChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.memoryConsumed' | translate}}"
          translate="home.detailPane.summaryTab.memoryConsumed">Memory Consumed</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">
        <nvd3 ng-if="timeRange === 'latest'"
              options="chartOptions" data="lineChartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest'"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>
      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryRuntimeStatisticsTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE && activeConfigStatus.executionMode !== pipelineConstant.CLUSTER">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.runtimeStatistics' | translate}}"
          translate="home.detailPane.summaryTab.runtimeStatistics">Runtime Statistics</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body double-size-panel">

        <ul class="table-properties">

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.timeOfLastReceivedRecord' | translate}}:</span>
            <span class="properties-value"
                  ng-if="common.pipelineMetrics.gauges['RuntimeStatsGauge.gauge'].value.timeOfLastReceivedRecord"
              >{{common.pipelineMetrics.gauges['RuntimeStatsGauge.gauge'].value.timeOfLastReceivedRecord  | date:'medium'}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.batchCount' | translate}}:</span>
            <span class="properties-value">{{common.pipelineMetrics.gauges['RuntimeStatsGauge.gauge'].value.batchCount}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.batchStartTime' | translate}}:</span>
            <span class="properties-value"
                  ng-if="common.pipelineMetrics.gauges['RuntimeStatsGauge.gauge'].value.batchStartTime"
              >{{common.pipelineMetrics.gauges['RuntimeStatsGauge.gauge'].value.batchStartTime  | date:'medium'}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.currentBatchAge' | translate}}:</span>
            <span class="properties-value">{{common.pipelineMetrics.gauges['RuntimeStatsGauge.gauge'].value.currentBatchAge}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.currentSourceOffset' | translate}}:</span>
            <span class="properties-value">{{common.pipelineMetrics.gauges['RuntimeStatsGauge.gauge'].value.currentSourceOffset}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.currentStage' | translate}}:</span>
            <span class="properties-value">{{stageNameToLabelMap[common.pipelineMetrics.gauges['RuntimeStatsGauge.gauge'].value.currentStage]}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.timeInCurrentStage' | translate}}:</span>
            <span class="properties-value">{{common.pipelineMetrics.gauges['RuntimeStatsGauge.gauge'].value.timeInCurrentStage}}</span>
          </li>

        </ul>

        <ul class="table-properties">
          <li>
            <span class="properties-value">{{'home.detailPane.summaryTab.threadLastRun' | translate}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.productionPipelineRunnable' | translate}}:</span>
            <span class="properties-value">{{common.pipelineMetrics.gauges['health.ProductionPipelineRunnable.gauge'].value.timestamp  | date:'medium'}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.rulesConfigLoaderRunnable' | translate}}:</span>
            <span class="properties-value">{{common.pipelineMetrics.gauges['health.RulesConfigLoaderRunnable.gauge'].value.timestamp  | date:'medium'}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.dataObserverRunnable' | translate}}:</span>
            <span class="properties-value">{{common.pipelineMetrics.gauges['health.DataObserverRunnable.gauge'].value.timestamp  | date:'medium'}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.metricObserverRunnable' | translate}}:</span>
            <span class="properties-value">{{common.pipelineMetrics.gauges['health.MetricObserverRunnable.gauge'].value.timestamp  | date:'medium'}}</span>
          </li>

          <li>
            <span class="properties-label">{{'home.detailPane.summaryTab.metricsEventRunnable' | translate}}:</span>
            <span class="properties-value">{{common.pipelineMetrics.gauges['health.MetricsEventRunnable.gauge'].value.timestamp  | date:'medium'}}</span>
          </li>

        </ul>

      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="slaveSDCInstancesTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE && activeConfigStatus.executionMode === pipelineConstant.CLUSTER">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.slaveSDCInstances' | translate}}"
              translate="home.detailPane.summaryTab.slaveSDCInstances">Slave SDC Instances</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body">
        <ul class="table-properties">
          <li ng-repeat="sdcURL in common.pipelineMetrics.slaves">
            <a href="/rest/v1/cluster/redirectToSlave?name={{pipelineConfig.info.name}}&sdcURL={{sdcURL}}"
               target="_blank">{{sdcURL}}</a>
          </li>
        </ul>

        <span class="no-data-available"
              ng-if="!common.pipelineMetrics || !common.pipelineMetrics.slaves || common.pipelineMetrics.slaves.length === 0"
              translate="global.messages.info.noDataAvailable">No Data Available.</span>

      </div>
    </div>
  </div>
</script>


<script type="text/ng-template" id="summaryAllStageBatchTimerBarChartTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE && activeConfigStatus.executionMode !== pipelineConstant.CLUSTER"
       ng-controller="AllStageBatchTimerChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.stageBatchProcessingTimer' | translate}}"
              translate="home.detailPane.summaryTab.stageBatchProcessingTimer">Stage Batch Processing Timer (in seconds)</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body double-size-panel">

        <nvd3 ng-if="timeRange === 'latest' && !allDataZero"
              options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest' && !allDataZero"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>


        <span class="zero-value" ng-if="allDataZero">0</span>


        <ul class="properties" ng-if="timeRange === 'latest'">
          <li>
            <span class="properties-label"> Total:</span>
            <span class="properties-value">{{totalValue}} seconds</span>
          </li>
        </ul>

      </div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="summaryAllStageMemoryConsumedBarChartTemplate">
  <div class="col-sm-4"
       ng-if="selectedType === pipelineConstant.PIPELINE && activeConfigStatus.executionMode !== pipelineConstant.CLUSTER && monitorMemoryEnabled"
       ng-controller="AllStageMemoryConsumedChartController">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span title="{{'home.detailPane.summaryTab.stageMemoryConsumed' | translate}}"
              translate="home.detailPane.summaryTab.stageMemoryConsumed">Stage Heap Memory Usage</span>
        <button type="button" class="close" aria-label="Close" ng-click="removeChart(chart, chartIndex)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="panel-body double-size-panel">

        <nvd3 ng-if="timeRange === 'latest' && !allDataZero"
              options="chartOptions" data="chartData" config="{ refreshDataOnly: true }"></nvd3>


        <nvd3 ng-if="timeRange !== 'latest' && !allDataZero"
              options="timeSeriesChartOptions" data="timeSeriesChartData" config="{ refreshDataOnly: true }"></nvd3>

        <span class="zero-value" ng-if="allDataZero">0</span>

        <ul class="properties" ng-if="timeRange === 'latest'">
          <li>
            <span class="properties-label"> Total:</span>
            <span class="properties-value">{{totalValue}} MB</span>
          </li>
        </ul>

      </div>
    </div>
  </div>
</script>